<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- build:css styles/options-vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/mui/packages/cdn/css/mui.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css styles/options.css -->
    <link href="styles/options.css" rel="stylesheet">
    <!-- endbuild -->
  </head>
  <body>

      <div class="mui-panel main-panel" id="app">
          <form class="mui-form">
              <legend>{{i18n.title}}</legend>
              <div class="mui-select">
                <select v-model="config.enabled">
                  <option :value="0">{{i18n.off}}</option>
                  <option :value="1">{{i18n.on}}</option>
                </select>
                <label>{{i18n.ifIntercept}}</label>
              </div>
              <div v-if="config.enabled === 1">
                <div class="mui-textfield mui-textfield--float-label">
                  <input type="text" v-model="config.size">
                  <label>{{i18n.fileSize}}</label>
                </div>
                <div class="mui-textfield mui-textfield--float-label">
                    <input type="text" v-model="config.path">
                    <label>{{i18n.aria2Prc}}</label>
                </div>
                <div class="mui-select">
                  <select v-model="config.enableFilter">
                    <option value="disabled">{{i18n.off}}</option>
                    <option value="blacklist">{{i18n.blacklist}}</option>
                    <option value="whitelist">{{i18n.whitelist}}</option>
                  </select>
                  <label>{{i18n.filter}}</label>
                </div>
                <div v-if="config.enableFilter !== 'disabled'" class="mui-textfield">
                  <textarea rows="6" v-model="config.filterUrls" :placeholder="urlBoxHint" ></textarea>
                  <label>{{i18n.filterUrls}}</label>
                </div>
              </div>
              <button v-if="saved"  type="button" class="mui-btn mui-btn--primary" disabled>{{i18n.saved}}</button>
              <button v-else @click="save" type="button" class="mui-btn mui-btn--primary">{{i18n.save}}</button>
            </form>
      </div>

    <!-- build:js scripts/options-vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/mui/packages/cdn/js/mui.js"></script>
    <script src="libs/vue.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js scripts/options.js -->
    <script src="scripts/options.js"></script>
    <!-- endbuild -->
  </body>
</html>
